<template>
  <div class="account-container">
    <HeaderTop title="Bank List"></HeaderTop>
    <div v-if="data.length <= 0" class="no">
      <img src="~@/assets/imgs/no-account.png" class="img"/>
      <div class="text-no">{{ $t('noWithdrawalChannel') }}</div>
    </div>
    <div v-else class="main">
      <div v-for="item in data" class="list">
        <p class="account-type">{{ item.accountType | switchAccountType }}</p>
        <p class="account-num">{{ item.account | formatCode }}</p>
        <p v-if="item.accountType === '5'" class="bank-name">{{ item.bankName }}</p>
      </div>
    </div>

  </div>
</template>

<script>
import keyMap from '@/config/key-map';
import HeaderTop from '@/components/header-top'

export default {
  name: 'account',
  components: {
    HeaderTop
  },
  data() {
    return {
      data: [],
    };
  },
  methods: {
    /**
     * 获取已经添加账号列表
     */
    getAccountList() {
      // this.data = [
      //   {accountType: '5', bankName: 'bank222', account: '09887912333'},
      //   {accountType: '2', bankName: 'AAAA', account: '09887912333'},
      // ];

      this.$api.queryAccountList().then(res => {
        const {status, error, data} = res;
        if ('1' === status && ('00000000' === error || '0000' === error) && data) {
          this.data = data;
        }
      });
    },
  },
  filters: {
    switchAccountType(type) {
      let res = type;
      keyMap.withdrawalChannel.forEach(item => {
        if (item.id === type) {
          res = item.name;
        }
      });
      return res;
    },
    formatCode(code) {
      if (code) {
        return code.replace(/(.{4})/g, '$1 ');
      }
      return '';
    }
  },
  created() {
    this.getAccountList();
  }
};
</script>

<style lang="scss">
@import '~@/assets/scss/function';

@font-face {
  font-family: DINALTERNATE;
  src: url('~@/assets/SF-Pro-Display-Bold.otf');
}

[data-page=account] {
  body {
    background-color: #fff;
  }

  .account-container {
    padding-top: 138px;

    .no {
      height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 160px;

      .img {
        display: block;
        width: 360px;
        height: 360px;
      }

      .text-no {
        font-size: 32px;
        color: #333333;
        margin-top: 40px;
      }
    }

    .main {
      width: 750px;
      margin: 0 auto;
      border-radius: 40px;
      color: #999;
      padding: 0 40px;

      .list {
        height: 240px;
        padding: 32px 40px;
        margin: 0 auto 30px;
        position: relative;
        background: url('~@/assets/imgs/bank-card-bg.png') no-repeat center;
        background-size: 100% 100%;
        color: white;
        line-height: 1;

        .account-type {
          font-size: 32px;
          font-weight: bold;
        }

        .account-num {
          font-size: 40px;
          font-weight: bold;
          margin-top: 68px;
        }

        .bank-name {
          font-size: 32px;
          font-weight: 400;
          margin-top: 14px;
        }
      }
    }
  }
}
</style>
